<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component_refs</title>
</head>
<body>
<div id="example"></div>
<div id="example2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入prop-type库-->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    // 1.定义组件
    class MyComponent extends React.Component{
        constructor(props) {
            super(props);
            this.showInput = this.showInput.bind(this)
            this.handleBlur = this.handleBlur.bind(this)
        }

        showInput(){
            const input = this.refs.content
            alert(input.value)
            alert(this.input.value)
        }
        //事件处理
        handleBlur(event){
            alert(event.target.value)
        }

        render() {
            return (
               <div>
                   <input type="text" ref="content"/>&nbsp;&nbsp;
                   <input type="text" ref={input=>this.input = input}/>&nbsp;&nbsp;
                   <button onClick={this.showInput}>提示输入</button>&nbsp;&nbsp;
                   <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>
               </div>
            );
        }
    }
    // 渲染组件标签
    ReactDOM.render(<MyComponent />,document.getElementById('example'))

</script>
</body>
</html>